/**
 * 远程控制 - 装车控制 - 参数设置
 * @author xiaoxujs
 */

import { useLocation, useNavigate } from "react-router-dom";

import ListStyleModule from "./components/ListStyleModule";
import ListStyleModuleZhaupai from "./components/ListStyleModuleZhaupai";
import ListStyleModuleHuifang from "./components/ListStyleModuleHuifang";
import ListStyleModulePingchan from "./components/ListStyleModulePingchan"; // 屏参列表设置
import ListStyleModuleRukouChukou from "./components/ListStyleModuleRukouChukou"; // 道闸入口出口

import MoshiSet from "./components/MoshiSet";
import SetJibenModule from "./components/SetJibenModule"; //  设置基本信息
import SetPlcModule from "./components/SetPlcModule";
import LookKongzhitai from "./components/LookKongzhitai";
import SetZPJModule from "./components/SetZPJModule"; // 设置抓拍机
import SetZBModule from "./components/SetZBModule"; //设置直播参数
import WuliaoSetModule from "./components/WuliaoSetModule"; //物料设置
import PianyiliangSetModule from "./components/PianyiliangSetModule"; //偏移量设置弹窗
import VideoPlaybackSetModule from "./components/VideoPlaybackSetModule"; //设置视频回放
import DaozhaSetModule from "./components/DaozhaSetModule"; // 道闸参数设置弹窗
import ScreenParamsSetModule from "./components/ScreenParamsSetModule"; //屏幕参数设置
import LargeScreenTitleSetModule from "./components/LargeScreenTitleSetModule"; //数据大屏参数设置弹窗
import ZhuapaiModule from "./components/ZhuapaiModule"; //相机抓拍弹窗


import { CardHtmlBox, LCPTItle, LoadingControlParameterSettingsBox, PLCCanshuBox, WuliaomingchengBox } from "./style";
import { Button, ConfigProvider, message, Switch } from "antd";
import { useWindowFontSize } from "../../../assets/fun/Antd/configprovider";
import { useCallback, useEffect, useState } from "react";
import { IIYckzZyLoadControlParamSetConfigQueryVOS, IYckzZyLoadControlParamSet } from "../../../type/remoteControl/loadingControlList";
import { getYckzZyLoadControlBarrierConfigStatusUpdate, getYckzZyLoadControlIsNotUse, getYckzZyLoadControlParamSet, getYckzZyLoadControlScreenStatusUpdate } from "../api";
import { handleGetDictionaryItemValue } from "../../../assets/fun/DictionaryItem";
import { laneNumber } from "../../../assets/data";


const LoadingControlParameterSettings = () => {
    const navigate = useNavigate();
    const location = useLocation() as { state?: { id: string } };

    const [paramsValue, setParamsValue] = useState<IYckzZyLoadControlParamSet>(); //参数设置详情数据
    const [setJibenShow, setSetJibenShow] = useState(false); // 基本设置弹窗
    const [lookKongzhitaiShow, setLookKongzhitaiShow] = useState(false); //查看控制台弹窗
    const [setPlcShow, setSetPlcShow] = useState(false); // 设置PLC参数设置弹窗
    const [setZPJShow, setSetZPJShow] = useState(false); // 设置 抓拍机参数设置弹窗
    const [setZBShow, setSetZBShow] = useState(false); // 设置 直播参数设置弹窗
    const [wuliaoSetShow, setWuliaoSetShow] = useState(false); // 设置 物料参数设置弹窗
    const [pianyiliangSetShow, setPianyiliangSetShow] = useState(false); // 设置 偏移量参数设置弹窗
    const [videoPlaybackSetShow, setVideoPlaybackSetShow] = useState(false); // 设置 视频回放参数
    const [daozhaSetShow, setDaozhaSetShow] = useState(false); //道闸数据修改
    const [screenParamsSetShow, setScreenParamsSetShow] = useState(false); //屏幕参数弹窗
    const [largeScreenTitleShow, setLargeScreenTitleShow] = useState(false); //数据大屏参数设置


    const [rukouDaozhaValue, setRukouDaozhaValue] = useState<IIYckzZyLoadControlParamSetConfigQueryVOS>(); // 入口道闸数据  0
    const [chukouDaozhaValue, setChukouDaozhaValue] = useState<IIYckzZyLoadControlParamSetConfigQueryVOS>(); // 出口道闸数据1

    const [clickType, setClickType] = useState<0 | 1>(); // 点击的是入口还是出口

    // 控制台
    const [channelNo, setChannelNo] = useState<string>(); // 车道编号
    const [shootShow, setShootShow] = useState(false); //抓拍相机弹窗


    const paramsFun = useCallback(async () => {
        if (location.state) {
            const params = {
                id: location.state.id
            }
            const { code, msg, data } = await getYckzZyLoadControlParamSet(params) as { code: number; msg: string; data: IYckzZyLoadControlParamSet };
            if (code === 20000) {
                setParamsValue(data);
                if (data.configQueryVOS) {
                    data.configQueryVOS.forEach(element => {
                        if (element.type === 0) {
                            setRukouDaozhaValue(element)
                        } else if (element.type === 1) {
                            setChukouDaozhaValue(element)
                        }
                    });
                }
            } else {
                message.error(msg);
            }
        }

    }, [location.state])
    useEffect(() => {
        paramsFun()
    }, [paramsFun])

    // 进入可视化大屏
    const handleLaneMonitoring = () => {
        navigate('/laneMonitoring', {
            state: {
                title: paramsValue ? paramsValue.title : '',
                chedao: paramsValue ? paramsValue.channelNo : ''
            }
        })
    }
    /**
     * 获取剩余百分比
     * @param all 限值
     * @param num 剩余数量
     * @returns 百分比
     */
    const handleRemainingPercentage = (all?: number, num?: number) => {
        if (all && num) {
            return Number((num / all * 100).toFixed(0))
        } else {
            return 0
        }

    }
    // 编辑弹窗 - 回调
    const handleSetCallback = () => {
        paramsFun();
        setSetJibenShow(false);
        setSetPlcShow(false);
        setSetZPJShow(false);
        setSetZBShow(false);
        setWuliaoSetShow(false);
        setPianyiliangSetShow(false);
        setVideoPlaybackSetShow(false);
        setDaozhaSetShow(false);
        setClickType(undefined);
        setScreenParamsSetShow(false);
        setLargeScreenTitleShow(false);
    }
    /**
 * 开启或者关闭装车站
 * @param id 装车站ID
 */
    const handleSwitch = async () => {
        if (location.state) {
            const { code, msg } = await getYckzZyLoadControlIsNotUse({ id: location.state.id }) as { code: number, msg: string };
            if (code === 20000) {
                message.success('操作成功');
                paramsFun();
            } else {
                message.error(msg)
            }
        }

    }
    //  关闭控制台
    const handleKZTCallback = () => {
        setChannelNo(undefined)
        setLookKongzhitaiShow(false);
    }
    // 关闭抓拍测试的回调函数
    const handleZPCallBack = () => {
        setShootShow(false);
    }
    // 显示屏状态
    const handlePMSwitch = async (e: boolean) => {
        if (paramsValue && paramsValue.setScreenVO.screenId) {
            const params = {
                screenId: paramsValue.setScreenVO.screenId,
                status: e ? '0' : '1'
            }
            const { code, msg } = await getYckzZyLoadControlScreenStatusUpdate(params) as { code: number; msg: string };
            if (code === 20000) {
                paramsFun()
            } else {
                message.error(msg);
            }
        }
    }
    // 设置
    const handleCRSwitch = async (e: boolean, id?: string) => {
        if (id) {
            const params = {
                barrierId: id,
                status: e ? '0' : '1'
            }
            const { code, msg } = await getYckzZyLoadControlBarrierConfigStatusUpdate(params) as { code: number; msg: string };
            if (code === 20000) {
                paramsFun()
            } else {
                message.error(msg);
            }
        }
    }
    return <LoadingControlParameterSettingsBox>
        <ConfigProvider
            theme={{
                components: {
                    Switch: {
                        colorPrimary: '#02D154',
                        colorPrimaryHover: '#02D154',
                        trackHeight: useWindowFontSize(20),
                        handleSize: useWindowFontSize(16),
                        trackMinWidth: useWindowFontSize(34),
                        trackPadding: useWindowFontSize(2)
                    }
                }
            }}
        >
            <div>
                <div className="lgl-title-button-style">
                    <div className="lgl-title-button-style-nei">
                        装车控制
                    </div>
                </div>
            </div>
            <div className="goback-box">
                <span className="iconfont" onClick={() => navigate(-1)} >&#xe641;</span>
                <span>返回</span>
            </div>
            <LCPTItle>
                <div className="lcptitle-left-box">
                    <div className="gun"></div>
                    <div>基础信息</div>
                </div>
                <Button type='primary' icon={<span className="iconfont">&#xe615;</span>} onClick={() => {
                    setChannelNo(paramsValue?.channelNo);
                    setLookKongzhitaiShow(true)
                }} >查看控制台</Button>
            </LCPTItle>
            <div className="zhuangchezhan-keshihuadaping-box">
                <div className="zhuangchezhan-box">
                    <div className="zcz-shang">
                        <div className="zcz-shang-left">
                            <span className="text">装车站</span>
                            <div className="wuliao">
                                <div className="wuliao-image" ></div>
                                <div className="wuliao-value">剩余物料：{paramsValue && handleRemainingPercentage(paramsValue.limitNum, paramsValue.exactAltitude)}%</div>
                            </div>
                            <div className="zhuangtai">使用状态：</div>

                            <Switch checked={paramsValue && paramsValue.useStatus === 0 ? false : true} onChange={() => handleSwitch()} />
                            {paramsValue && paramsValue.useStatus === 0 ? <span className="tingzhishiyong">停止使用</span> : <span className="tourushiyong">投入使用</span>}
                        </div>
                        <Button type="link" onClick={() => setSetJibenShow(true)}>设置参数</Button>
                    </div>
                    <div className="zcz-xia">
                        <div className="zcz-xia-item">
                            <span className="zcz-xia-item-title">装车站名称</span>
                            <span className="zcz-xia-item-value">{paramsValue && (paramsValue.loadStationName || '--')}</span>
                        </div>
                        <div className="zcz-xia-item">
                            <span className="zcz-xia-item-title">车道编号</span>
                            <span className="zcz-xia-item-value">{paramsValue && (handleGetDictionaryItemValue(laneNumber, paramsValue.channelNo) || '--')}</span>
                        </div>
                        <div className="zcz-xia-item">
                            <span className="zcz-xia-item-title">限值(吨)</span>
                            <span className="zcz-xia-item-value">{paramsValue && (paramsValue.limitNum || '--')}</span>
                        </div>
                        <div className="zcz-xia-item">
                            <span className="zcz-xia-item-title">定量模式</span>
                            <span className="zcz-xia-item-value">{paramsValue && (paramsValue.quantitativeMode || '--')}</span>
                        </div>
                    </div>
                </div>
                <div className="keshihuadaping-box">
                    <div className="kshdp-top">
                        <div className="kshdp-top-title">可视化大屏</div>
                        <Button type="link" onClick={() => setLargeScreenTitleShow(true)}>设置大屏标题</Button>
                    </div>
                    <div className="rukou-box" onClick={handleLaneMonitoring}>
                        <div className="icon-box">
                            <span className="iconfont">&#xe600;</span>
                        </div>
                        <div className="rukou-text">
                            可视化大屏入口
                        </div>
                    </div>
                </div>
            </div>
            {/* 物料设置 */}
            <CardHtmlBox>
                <div className="box-top">
                    <div className="box-top-title">物料设置</div>
                    <Button type="link" onClick={() => setWuliaoSetShow(true)} >设置参数</Button>
                </div>
                <WuliaomingchengBox>
                    <span className="zcz-xia-item-title">物料名称</span>
                    <span className="zcz-xia-item-value">{paramsValue && (paramsValue.materialName || '--')}</span>
                </WuliaomingchengBox>
            </CardHtmlBox>
            {/* plc参数 */}
            <CardHtmlBox>
                <div className="box-top">
                    <div className="box-top-title">PLC参数</div>
                    <Button type="link" onClick={() => setSetPlcShow(true)}>设置参数</Button>
                </div>
                <PLCCanshuBox>
                    <ListStyleModule data={paramsValue && paramsValue.setPlcVO} setPianyiliangSetShow={setPianyiliangSetShow} />
                </PLCCanshuBox>
            </CardHtmlBox>
            {/* 抓拍相机参数 */}
            <CardHtmlBox>
                <div className="box-top">
                    <div className="box-top-title">抓拍机参数</div>
                    <div><Button type="link" onClick={() => {
                        if (paramsValue && paramsValue.setCatchVO.catchId) {
                            setShootShow(true);
                        } else {
                            message.error('请先设置相机参数')
                        }

                    }}>抓拍测试</Button>
                        <Button type="link" onClick={() => setSetZPJShow(true)}>设置参数</Button></div>

                </div>
                <PLCCanshuBox>
                    <ListStyleModuleZhaupai data={paramsValue && paramsValue.setCatchVO} />
                </PLCCanshuBox>
            </CardHtmlBox>
            {/* 直播参数 */}
            <CardHtmlBox>
                <div className="box-top">
                    <div className="box-top-title">直播参数</div>
                    <Button type="link" onClick={() => setSetZBShow(true)}>设置参数</Button>
                </div>
                <WuliaomingchengBox>
                    <span className="zcz-xia-item-title">RTSP地址</span>
                    <span className="zcz-xia-item-value">{paramsValue && (paramsValue.setLiveVO.liveAddress || '--')}</span>
                </WuliaomingchengBox>
            </CardHtmlBox>
            {/* 视频回放参数 */}
            <CardHtmlBox>
                <div className="box-top">
                    <div className="box-top-title">视频回放参数</div>
                    <Button type="link" onClick={() => setVideoPlaybackSetShow(true)}>设置参数</Button>
                </div>
                <PLCCanshuBox>
                    <ListStyleModuleHuifang data={paramsValue && paramsValue.setVideoVO} />
                </PLCCanshuBox>
            </CardHtmlBox>
            <LCPTItle>
                <div className="lcptitle-left-box">
                    <div className="gun"></div>
                    <div>启动模式</div>
                </div>
            </LCPTItle>
            {/* 模式设置 */}
            <MoshiSet
                handleSetCallback={handleSetCallback} moshiData={paramsValue && paramsValue.modeQueryVOS} clickId={location.state?.id} />
            {/* 屏参设置 */}
            <CardHtmlBox>
                <div className="box-top">
                    <div className="box-top-title">
                        <span className="text">屏参设置</span>
                        <div className="zhuangtai">使用状态：</div>
                        <Switch checked={paramsValue && paramsValue.setScreenVO.isNotUse === 0 ? true : false} onChange={(e) => handlePMSwitch(e)} />
                        {paramsValue && paramsValue.setScreenVO.isNotUse === 0 ? <span className="qiyong-text">启用</span> : <span className="tingyong-text">停止</span>}

                    </div>
                    <Button type="link" onClick={() => setScreenParamsSetShow(true)}>设置参数</Button>
                </div>
                <PLCCanshuBox>
                    <ListStyleModulePingchan data={paramsValue && paramsValue.setScreenVO} />
                </PLCCanshuBox>
            </CardHtmlBox>
            {/* 道闸模式标题 */}
            <LCPTItle>
                <div className="lcptitle-left-box">
                    <div className="gun"></div>
                    <div>道闸模式</div>
                </div>
            </LCPTItle>
            {/* 道闸模式入口 */}
            <CardHtmlBox>
                <div className="box-top">
                    <div className="box-top-title">
                        <span className="text">入口</span>
                        <div className="zhuangtai">使用状态：</div>
                        <Switch checked={rukouDaozhaValue && rukouDaozhaValue.isNotUse === 0 ? true : false} onChange={(e) => handleCRSwitch(e, rukouDaozhaValue?.barrierId)} />
                        {rukouDaozhaValue && rukouDaozhaValue.isNotUse === 0 ? <span className="qiyong-text">启用</span> : <span className="tingyong-text">停止</span>}
                    </div>
                    <Button type="link" onClick={() => {
                        setClickType(0)
                        setDaozhaSetShow(true);
                    }}>设置参数</Button>
                </div>
                <PLCCanshuBox>
                    <ListStyleModuleRukouChukou data={rukouDaozhaValue} />
                </PLCCanshuBox>
            </CardHtmlBox>
            {/* 道闸模式出口 */}
            <CardHtmlBox>
                <div className="box-top">
                    <div className="box-top-title">
                        <span className="text">出口</span>
                        <div className="zhuangtai">使用状态：</div>
                        <Switch checked={chukouDaozhaValue && chukouDaozhaValue.isNotUse === 0 ? true : false} onChange={(e) => handleCRSwitch(e, chukouDaozhaValue?.barrierId)} />
                        {chukouDaozhaValue && chukouDaozhaValue.isNotUse === 0 ? <span className="qiyong-text">启用</span> : <span className="tingyong-text">停止</span>}
                    </div>
                    <Button type="link" onClick={() => {
                        setClickType(1);
                        setDaozhaSetShow(true);
                    }}>设置参数</Button>
                </div>
                <PLCCanshuBox>
                    <ListStyleModuleRukouChukou data={chukouDaozhaValue} />
                </PLCCanshuBox>
            </CardHtmlBox>
        </ConfigProvider>
        {/* 基本参数设置 */}
        <SetJibenModule
            open={setJibenShow}
            handleSetPlcCallback={handleSetCallback}
            clickData={paramsValue}
            clickId={location.state?.id}
        />
        {/* 查看控制台 */}
        <LookKongzhitai channelNo={channelNo} open={lookKongzhitaiShow} handleKZTCallback={handleKZTCallback} />


        {/* 设置PLC参数 */}
        <SetPlcModule
            open={setPlcShow}
            handleSetPlcCallback={handleSetCallback}
            clickData={paramsValue}
            clickId={location.state?.id}
        />
        {/* 设置抓拍机参数 */}
        <SetZPJModule
            open={setZPJShow}
            handleSetPlcCallback={handleSetCallback}
            clickData={paramsValue}
            clickId={location.state?.id}
        />
        {/* 设置直播参数 */}
        <SetZBModule
            open={setZBShow}
            handleSetPlcCallback={handleSetCallback}
            clickData={paramsValue}
            clickId={location.state?.id}
        />
        {/* 物料设置参数 */}
        <WuliaoSetModule
            open={wuliaoSetShow}
            handleSetCallback={handleSetCallback}
            clickData={paramsValue}
            clickId={location.state?.id}
        />
        {/* 偏移量设置 */}
        <PianyiliangSetModule
            open={pianyiliangSetShow}
            handleSetCallback={handleSetCallback}
            clickData={paramsValue}
        />
        {/* 设置视频回放 */}
        <VideoPlaybackSetModule
            open={videoPlaybackSetShow}
            handleSetCallback={handleSetCallback}
            clickData={paramsValue}
            clickId={location.state?.id}
        />
        {/* 设置道闸 */}
        <DaozhaSetModule
            open={daozhaSetShow}
            handleSetCallback={handleSetCallback}
            clickData={clickType === 0 ? rukouDaozhaValue : chukouDaozhaValue}
            clickType={clickType}
            clickId={location.state?.id}
        />
        {/* 设置屏幕参数 */}
        <ScreenParamsSetModule
            open={screenParamsSetShow}
            handleSetCallback={handleSetCallback}
            clickData={paramsValue}
            clickId={location.state?.id}
        />
        {/* 设置数据大屏参数 */}
        <LargeScreenTitleSetModule
            open={largeScreenTitleShow}
            handleSetCallback={handleSetCallback}
            clickData={paramsValue}
            clickId={location.state?.id}
        />
        {/* 抓拍相机弹窗 */}
        <ZhuapaiModule open={shootShow} catchId={paramsValue?.setCatchVO.catchId} handleCallBack={handleZPCallBack} />

    </LoadingControlParameterSettingsBox>
}

export default LoadingControlParameterSettings;